﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .slidearea {
            padding: 10px 0;
        }

        .slidearea .slider {
            display: inline-block;
            position: absolute;
            width: 12px;
            height: 12px;
            top: -3px;
            left: 2px;
            border-radius: 50%;
            box-shadow: 0px 0px 1px 1px #808080;
            background-color: #fff;
        }

        .slidearea .layui-progress-bar {
            -moz-transition: all 0s;
            -o-transition: all 0s;
            -webkit-transition: all 0s;
            transition: all 0s;
        }
    </style>
</head>

<body>
    <p id="value" style="margin-top: 10%;text-align:center;">0</p>
    <div style="padding: 50px ;margin:auto;text-align:center;width:50%;height:200px;">
        <div class="slidearea">
            <div class="layui-progress" lay-filter="demo">
                <div class="layui-progress-bar layui-bg-blue"></div>
                <span class="slider"></span>
            </div>
        </div>
    </div>
    <script src="layui/layui.js"></script>
    <script>
        layui.use(['slider'], function () {
            
        });
    </script>
</body>

</html>